<template>
  <teleport to="body">
    <transition name="fade">
      <div
        v-if="visible"
        class="my-dialog-container"
        :class="[direction]"
        @click.stop="close"
      >
        <div @click.stop class="my-dialog-inner">
          <slot></slot>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script>
import { ref } from "vue";

export default {
  name: "MyDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    direction: {
      type: String,
      default: "center",
    },
  },
  emits: ["update:visible", "close"],
  setup(_, { emit }) {
    const close = () => {
      emit("update:visible", false);
      emit("close", false);
    };

    return {
      close,
    };
  },
};
</script>

<style lang="less" scoped>
.my-dialog-container {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  .my-dialog-inner {
    position: relative;
  }
  &.center {
    align-items: center;
    .my-dialog-inner {
      animation: fadeZoomIn 0.5s cubic-bezier(0.8, 0, 0, 1.5);
    }
  }
  &.top {
    align-items: flex-start;
    .my-dialog-inner {
      animation: slideInDown 0.3s linear;
    }
  }
  &.bottom {
    align-items: flex-end;
    .my-dialog-inner {
      animation: slideInUp 0.3s linear;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
@keyframes fadeZoomIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>
